<script  lang="ts" setup>
import BarChart from "../layout/echarts/barChart.vue"
import { RouterLink } from "vue-router";
import { ref,getCurrentInstance } from "vue";
const count = ref([
  '评测项目名称1',
  '评测项目名称2',
  '评测项目名称3',
  '评测项目名称4',
  '评测项目名称5',
])
const plan = ref([
  '待完成方案1',
  '待完成方案2',
  '待完成方案3',
  '待完成方案4',
  '待完成方案5',
])
const plan_name=ref('方案名称')
const plan_body=ref('方案内容')
const load_count = () => {
  count.value.push('评测项目名称6','评测项目名称7')
}
const load_play = () => {
  plan.value.push('待完成方案','待完成方案')
}
const option = ref({
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'line',
      stack: 'x'
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'line',
      stack: 'x'
    }
  ]
})
const { proxy } = getCurrentInstance();
const Chat_count=(i)=>{
  // proxy.$http.get(''{})
  const a=Math.floor(Math.random() * 100) + 1;
  if(a%2){
    option.value.xAxis.data=['B', 'C', 'D', 'E','A'];
  option.value.series[1].data=[10, 22, 28, 43, 49];
  option.value.series[0].data=[10, 4, 2, 5, 10];
  }
  else{
    option.value.xAxis.data=['B','D', 'C','A','E'];
  option.value.series[1].data=[5, 4, 20, 5, 10];
  option.value.series[0].data=[24, 22, 19, 43, 39];
  }
 
}
const select_plan=(i)=>{
  plan_name.value=i
  plan_body.value=i
}
</script>

<template>
  <div class="screen">
    <el-row class="top" justify="space-around">
      <el-col :span="6">
        <el-card id="card">
          <template #default>
            <div v-infinite-scroll="load_count" class="infinite-list" style="overflow: auto">
              <li v-for="i in count" :key="i" class="infinite-list-item" @click="Chat_count(i)">{{ i }}</li>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card id="chart_card">
          <template #default>
            <div class="charts" style="left:40%">
              <BarChart :width="'800px'" :height="'200px'" :options="option"></BarChart>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="center" justify="space-around" >
      <el-col :span="6"  >
        <el-card id="card" style="height:250px ;">
        <template #default>
          <div v-infinite-scroll="load_play" class="infinite-list" style="overflow: auto ;height:240px ;">
            <li v-for="i in plan" :key="i" class="infinite-list-item" @click="select_plan(i)">
              {{ i }}</li>
          </div>
        </template>
      </el-card>
      </el-col>
      <el-col  :span="3" style="margin-top: 50px;">
      <img src="../../public/images/方案图片.png" style="width: 150px; height: 150px ;border-radius: 50%; " alt="">
      <p style="margin-top: 15px;font-family: 楷体, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 26px;">{{ plan_name }}</p>
      </el-col>
      <el-col   :span="8"  >
        <el-card style="width: 500px;height: 300px;">
          <template #header>
      <div class="card-header">
        <span>方案简介 </span>
      </div>
    </template>
    <template #default>
      <div class="card-body">
       <el-text truncated>&nbsp;&nbsp;&nbsp;&nbsp;{{ plan_body }}</el-text>
      </div>
    </template>
          </el-card>
      </el-col>
    </el-row>
    <el-row class="foot" >
      <el-col :span="6" :offset="5">
        <router-link to="/treat">
        <el-button  type="primary" size="large" style="width: 300px;">
        前往治疗
      </el-button>
    </router-link>
    </el-col>
      <el-col :span="6" :offset="1">
        <router-link to="/assess">
          <el-button  type="primary" size="large" style="width: 300px;">
        前往评定
      </el-button>
        </router-link>
      </el-col>
  
    </el-row>
  </div>
</template>

<style scoped>
.card-body{
  font-family: Arial Normal;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-align: justify;
}
.card-header{
  font-family:  'Arial Normal' ;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
}
.infinite-list {
  height: 200px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
    font-family:楷体;
    font-weight: 400;
    font-style: normal;
    font-size: 21px;
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}

.screen {
  position: relative;
  top: 80px;
  width: 100%;
  height: 80%;
  margin: -7.5px;
  /* height: 100vh;
  width: 100vw; */
}

.top {
  /* position: absolute; */
}

#chart_card {
  width: 800px;
  height: 220px;
}

#card {
  width: 395px;
  height: 220px;
  /* position: relative; */
}

.center {
  /* position: relative; */
  margin-top: 100px;
  margin-left: 20px;
}
.foot{
  margin-top: 40px;
}

</style>